Flashing Heart

Code a Flashing Heart

Code the lights on the micro:bit into a flashing heart animation! 💖

Heart shape in the LEDs

Step 1

Use the basic ||basic:show icon|| function to display the HEART icon. Type the code below, or drag a code snippet from the ||basic:Basic|| Toolbox category.

basic.showIcon(IconNames.Heart)

Step 2

Use the ||basic:clear screen|| function followed by the ||basic:pause|| function to turn off the lights for 500 milliseconds (or half a second).

basic.showIcon(IconNames.Heart)
basic.clearScreen()
basic.pause(500)

Step 3

Copy the code you’ve written and paste it at the end. In the copied code, change the ||basic:Icon Names|| to a SMALL HEART. Run your code in the on-screen micro:bit simulator. Do you see a big and small heart animation?

basic.showIcon(IconNames.Heart)
basic.clearScreen()
basic.pause(500)
basic.showIcon(IconNames.SmallHeart)
basic.clearScreen()
basic.pause(500)

Step 4

Now let’s make our hearts flash forever! Put a ||basic:forever|| loop around your code.

basic.forever(function() {
    basic.showIcon(IconNames.Heart)
    basic.clearScreen()
    basic.pause(500)
    basic.showIcon(IconNames.SmallHeart)
    basic.clearScreen()
    basic.pause(500)
})

Step 5

If you have a micro:bit device, connect it to your computer and click the |Download| button. Follow the instructions to transfer your code onto the micro:bit and watch the hearts flash! ⭐ Great job! ⭐